<template>
  <div class="policy">
    <el-card class="box-card" style="margin-top: 35px;border-radius: 20px;">
      <div class="policy-header">
        <div  style="display: flex;align-items: center">
          <h2>工单列表</h2>
          <!-- <el-button @click="add" icon="el-icon-plus" style="margin-left: 20px;background: #699FF3;color: #fff;border-radius: 10px"></el-button> -->
        </div>

        <div class="search-box" style="display: flex;align-items: center">
          <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.order_id" placeholder="请输入订单号" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.issue" placeholder="请输入问题标题" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-select v-model="form.status" placeholder="选择工单状态" clearable style="width: 80%;">
                <el-option label="待回复" value="1"></el-option>
                <el-option label="已回复" value="2"></el-option>
                <el-option label="已完结" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;align-items: center;margin-bottom: 0">
              <el-button style="background: #699FF3;color: #fff;border-radius: 24px;margin-bottom: 0" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--       列表-->
      <div class="list">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{background:'#F4F4F4',border:'none'}"
        >
          <el-table-column
            prop="id"
            label="ID"
            align="center"
          />
          <el-table-column
            prop="order_id"
            label="订单号"
            align="center"
          />
          <el-table-column
            prop="task_no"
            label="易达工单号"
            align="center"
          />
          <el-table-column
            prop="user.name"
            label="用户"
            align="center"
          />
          <el-table-column
            prop="issue"
            label="问题标题"
            align="center"
          />
          <el-table-column label="工单类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type=='1'">催取件</span>
              <span v-if="scope.row.type=='2'">重量异常</span>
              <span v-if="scope.row.type=='3'">虚假取件</span>
              <span v-if="scope.row.type=='7'">签收未收到货</span>
              <span v-if="scope.row.type=='8'">错件</span>
              <span v-if="scope.row.type=='9'">催物流</span>
              <span v-if="scope.row.type=='10'">催派送</span>
              <span v-if="scope.row.type=='13'">核实退回原因</span>
              <span v-if="scope.row.type=='14'">物流停滞</span>
              <span v-if="scope.row.type=='15'">重新分配快递员</span>
              <span v-if="scope.row.type=='16'">取消运单</span>
            </template>
          </el-table-column>
          <el-table-column label="工单状态" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status=='1'">待回复</el-tag>
              <el-tag type="success" v-if="scope.row.status=='2'">已回复</el-tag>
              <el-tag type="info" v-if="scope.row.status=='3'">已完结</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-view" style="color: #409EFF;" @click="infoBtn(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging-device">
        <Pagingdevice
          ref="paging"
          :total-count="totalCount"
          :current_page="current_page"
          :per_page="per_page"
          @select="select"
          @changep="changep"
        />
      </div>
    </el-card>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="1000px">
      <div>
        <el-descriptions class="margin-top" title="工单详情" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              ID
            </template>
            {{ dataInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单号
            </template>
            {{ dataInfo.order_id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              易达工单号
            </template>
            {{ dataInfo.task_no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              问题标题
            </template>
            {{ dataInfo.issue }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              工单类型
            </template>
              <span v-if="dataInfo.type=='1'">催取件</span>
              <span v-if="dataInfo.type=='2'">重量异常</span>
              <span v-if="dataInfo.type=='3'">虚假取件</span>
              <span v-if="dataInfo.type=='7'">签收未收到货</span>
              <span v-if="dataInfo.type=='8'">错件</span>
              <span v-if="dataInfo.type=='9'">催物流</span>
              <span v-if="dataInfo.type=='10'">催派送</span>
              <span v-if="dataInfo.type=='13'">核实退回原因</span>
              <span v-if="dataInfo.type=='14'">物流停滞</span>
              <span v-if="dataInfo.type=='15'">重新分配快递员</span>
              <span v-if="dataInfo.type=='16'">取消运单</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              工单状态
            </template>
              <el-tag v-if="dataInfo.status=='1'">待回复</el-tag>
              <el-tag type="success" v-if="dataInfo.status=='2'">已回复</el-tag>
              <el-tag type="info" v-if="dataInfo.status=='3'">已完结</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              创建时间
            </template>
            {{ dataInfo.created_at }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              更新时间
            </template>
            {{ dataInfo.updated_at }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              用户
            </template>
            {{ dataInfo.user.name }}
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label">
              订单 ID
            </template>
            {{ dataInfo.order.id }}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label">
              订单号
            </template>
            {{ dataInfo.order.order_no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单总价
            </template>
            {{ dataInfo.order.total_price }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单货物名称
            </template>
            {{ dataInfo.order.goods_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单包裹数量
            </template>
            {{ dataInfo.order.package_count }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单重量
            </template>
            {{ dataInfo.order.weight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单体积
            </template>
            {{ dataInfo.order.volume }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单配送公司
            </template>
            {{ dataInfo.order.delivery_type }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单配送公司名称
            </template>
            {{ dataInfo.order.delivery_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单配送公司的业务类型
            </template>
            {{ dataInfo.order.delivery_business }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单配送公司的业务类型名称
            </template>
            {{ dataInfo.order.delivery_business_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单备注
            </template>
            {{ dataInfo.order.remark }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单支付状态
            </template>
            <el-tag type="danger" v-if="dataInfo.order.pay_status=='unpaid'">未支付</el-tag>
            <el-tag type="success" v-if="dataInfo.order.pay_status=='paid'">已支付</el-tag>
            <el-tag type="info" v-if="dataInfo.order.pay_status=='no_need'">无需支付</el-tag>
            <el-tag type="warning" v-if="dataInfo.order.pay_status=='supplementary'">待补单</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单应付金额
            </template>
            {{ dataInfo.order.need_pay }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单已支付金额
            </template>
            {{ dataInfo.order.pay_amount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单状态
            </template>
              <span v-if="dataInfo.order.status=='uncollected'">待取件</span>
              <span v-if="dataInfo.order.status=='collected'">已取件</span>
              <span v-if="dataInfo.order.status=='shipped'">运输中</span>
              <span v-if="dataInfo.order.status=='received'">已签收</span>
              <span v-if="dataInfo.order.status=='canceled'">已取消</span>
              <span v-if="dataInfo.order.status=='abnormal'">异常状态</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" span="3">
              工单回复
            </template>
            <el-table
              :data="dataInfo.logs"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="回复ID"
                align="center">
              </el-table-column>
              <el-table-column
                prop="work_order_id"
                label="工单ID"
                align="center">
              </el-table-column>
              <el-table-column label="操作人" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.from=='user'">用户</span>
                  <span v-if="scope.row.from=='yida'">易达</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="content"
                label="内容"
                align="center">
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope">
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="scope.row.urls[0]"
                    :fit="'cover'"
                    :preview-src-list="scope.row.urls"></el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="created_at"
                label="回复时间"
                align="center">
              </el-table-column>
            </el-table>
          </el-descriptions-item>
        </el-descriptions>

      </div>
    </el-dialog>

  </div>
</template>

<script>
import {imgURL,workOrderList,workOrderInfo} from "@/api"

import Pagingdevice from '@/components/Pagingdevice'
export default {
  name: "musicList",
  components: {
    Pagingdevice,
  },
  data() {
    return {
      state: 'add',
      item:{},
      isShow: false,
      imgURL,
      form:{
        order_id:'',
        status:'',
        issue:''
      },
      dialogVisible:false,
      dataInfo:{
        send_address:{},
        receive_address:{},
        order:{},
        user:{}
      },
      tableData:[],
      totalCount: 0,
      current_page: 1,
      per_page:10,
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    async getList(){
      console.log('列表')
      this.form.page = this.current_page
      await workOrderList(this.form).then(res=>{
        console.log(res)
        if (res.code==10000){
          this.tableData = res.data.list;
          this.totalCount=res.data.meta.total
        }
      })
    },
    // 搜索
    search(){
      this.current_page=1
      this.getList()
    },
    infoBtn(row){
      workOrderInfo({id:row.id}).then(res=>{
        console.log(res)
        if(res.code==10000){
          this.dialogVisible = true
          this.dataInfo = res.data
        }
      })

    },
    select(num,data){
      this.current_page = num;
      this.per_page = data;
      this.getList()
    },
    changep(num){
      this.current_page = num;
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.policy {
  font-size: 14px;
  padding: 0 80px;
  box-sizing: border-box;
  color: #000;
  &-header {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .class-box {

      //float: right;
      margin-bottom: 5px;
    }
    .add-btn {
      width: 100px;
      height: 40px;
      border-radius: 5px;
      background: #1184e6;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
    }
    .add-btn {
      margin-left: 80px;
    }
  }
  .list {
    margin: 30px;
    text-align: center;
  }
  .paging-device {
    margin: 30px;

  }
}

</style>
<style>
.el-table__header-wrapper{
  border-radius: 10px;
}
</style>

